<template>
<!--  东营-->
  <div :class="{'scaleMap':(clientWidth<1630)}" class="regionMap_wrap position-absolute w-100" style="right: 0;top:0">
    <ul class="regionMap p_absolute" ref="regionMap">
      <!-- <li class="p_absolute" @mouseenter="enter(item)" @mouseleave="leave" @mousemove="updateXY" v-for="(item,index) in regions">{{item.Name}}</li>-->
      <li :class="{'active':strokeIndex==index}" @mouseenter="enter(regions[index-1],index,$event)" @mouseleave="leave($event)"
          @mousemove="updateXY" class="p_absolute" ref="stroke" v-for="index in 8">
        <div ref="icon">
          <i :class="iconObj[iconIndexs[index-1][iconIndex-1]]" class="iconfont p_absolute"
             v-for="iconIndex in ((index-1)==4?2:4)"></i>
        </div>
        {{regionNames[index-1]}}
      </li>
      <div class="regionInfo p_absolute" ref="regionInfo2" style="top:-70px;right:250px;z-index: 10" v-show="!showPopover">
        <device-statistics :region="region" :regionData="regionData"></device-statistics>
      </div>
    </ul>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import api from 'api/api'
  import deviceStatistics from './device-statistics'
  import mapData from 'static/util/mapData'

  export default {
    components: {deviceStatistics},
    props: {
    /*  showPopover:{
        type:Boolean,
        default:false
      },*/
      regions:{
        type:Array,
        default:[]
      }
    },
    data() {
      return {
        strokeIndex:1,
        regionNames:['七工区','六工区','二工区','一工区','新区','五工区','四工区','三工区'],
        iconIndexs:[],
        iconObj:{1:'icon-ecc-alarm',2:'icon-off',3:'icon-line',4:'icon-off',5:'icon-off',6:'icon-line'},
        region:{Ecc:{},Pole:{}},
        showPopover:false,
        regionData:{EccCount:0,PoleCount:0,BulbCount:0},
      }
    },
    watch: {
      regions(regions){
        this.regionData=mapData[regions[0].Id]
      },
      strokeIndex(index){
        this.getDevInfo(this.regions[index-1])
      }
    },
    computed: {
      ...mapState({
        clientWidth: state => state.comm.clientWidth,
        clientHeight: state => state.comm.clientHeight,
      })
    },
    methods: {
      enter(item,index,evt){
        evt.target.style.zIndex=2
        this.strokeIndex=index
        this.$store.commit('timer/clearTimer2')
        this.getDevInfo(item)
        this.showPopover = true
        this.$emit('updateShowPopover',true)
      },
      leave:function(evt){
        evt.target.style.zIndex=1
        this.showPopover = false
        this.$emit('updateShowPopover',false)
        this.setStrokeTimer()
        this.$refs.regionInfo2.style.top = this.$refs.stroke[this.strokeIndex-1].offsetTop + 'px'
        this.$refs.regionInfo2.style.left = this.$refs.stroke[this.strokeIndex-1].offsetLeft + 'px'
      },
      updateXY(event){
        this.$emit('updateXY',{event:event,region:this.region,regionData:this.regionData})
      },
      getDevInfo(item){
        if(!item.Id) return
        api.fetchSimple('/ViewInfo/DevCountInfo', {regionIds: [item.Id]}).then(r => {
          this.region = r
          this.regionData = mapData[item.Id]
        })
      },
      setStrokeTimer(){
        let _this=this
        this.$store.commit('timer/setTimer2',setInterval(()=>{
          _this.strokeIndex++
          if (_this.strokeIndex > 8) {
            _this.strokeIndex = 1
          }
          _this.$refs.regionInfo2.style.top = _this.$refs.stroke[_this.strokeIndex-1].offsetTop + 'px'
          _this.$refs.regionInfo2.style.left = _this.$refs.stroke[_this.strokeIndex-1].offsetLeft + 'px'
          _this.showIcon=false
          setTimeout(()=>{
            _this.showIcon=true
          },500)
        },8000))
      },
      setIconIndexs(){
        //1-6
        for(let i=0;i<8;i++){
          if(i==4){
            this.iconIndexs.push([parseInt(Math.random() * 5 + 2, 10), parseInt(Math.random() * 5 + 2, 10)])
          }else{
            if(i==0||i==5){
              this.iconIndexs.push([1,
                parseInt(Math.random() * 5 + 2, 10),
                parseInt(Math.random() * 5 + 2, 10),
                parseInt(Math.random() * 5 + 2, 10)])
            }else{
              this.iconIndexs.push([
                parseInt(Math.random() * 5 + 2, 10),
                parseInt(Math.random() * 5 + 2, 10),
                parseInt(Math.random() * 5 + 2, 10),
                parseInt(Math.random() * 5 + 2, 10)])
            }
          }
        }
      },
      setIcons(){
        let icons=this.$refs.icon
        let strokes={
          'stroke1':[[170,86],[135,75],[130,170],[190,130]],
          'stroke2':[[130,130],[110,95],[86,85],[40,200]],
          'stroke3':[[10,150],[25,140],[35,160],[40,180]],
          'stroke4':[[30,30],[35,55],[35,75],[10,100]],
          'stroke5':[[5,70],[25,75]],
          'stroke6':[[30,80],[50,150],[70,160],[110,60]],
          'stroke7':[[10,50],[30,70],[100,60],[100,30]],
          'stroke8':[[130,160],[140,190],[130,250],[130,300]],
        }
        for(let i=0;i<icons.length;i++){
          let childrens=icons[i].children
          for(let j=0;j<childrens.length;j++){
            childrens[j].style.top=strokes['stroke'+(i+1)][j][0]+'px'
            childrens[j].style.left=strokes['stroke'+(i+1)][j][1]+'px'
          }
        }
      },
    },
    created() {
      // this.regions = this.regions.splice(1, 8)
      this.setStrokeTimer()
      this.setIconIndexs()
    },
    mounted() {
      let _this = this
      // setTimeout(() => {
        _this.setIcons()
      // }, 300)
      setTimeout(() => {
        _this.getDevInfo(this.regions[0])
      }, 300)
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" >
  .regionMap_wrap{
    &.scaleMap{width:600px;transform:scale(0.6);}
    .regionMap{margin-top:-70px;height:350px;width:100%;
      // &.scaleMap{transform:scale(0.6)}
      &>li{
        display:flex;justify-content:center;align-items:center;font-size:12px;color:#27CCF8;font-weight:600;
        &:hover,&.active{color:#094353;font-size:14px;}
      }
      &>li:nth-child(1){top:-70px;right:250px;width: 287px;height: 269px;background: url("~assets/image/dashboard/map/Stroke2.png") no-repeat;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map/Stroke2_1.png")}
      }
      &>li:nth-child(2){top:5px;right:78px;width: 299px;height: 197px;background: url("~assets/image/dashboard/map/Stroke1.png") no-repeat;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map/Stroke1_1.png")}
      }
      &>li:nth-child(3){top:192px;right:308px;width: 227px;height: 66px;background: url("~assets/image/dashboard/map/Stroke3.png") no-repeat;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map/Stroke3_1.png")}
      }
      &>li:nth-child(4){top:194px;right:70px;width: 247px;height: 96px;background: url("~assets/image/dashboard/map/Stroke4.png") no-repeat;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map/Stroke4_1.png")}
      }
      &>li:nth-child(5){top:214px;right:70px;width: 99px;height: 61px;z-index:2;background: url("~assets/image/dashboard/map/Stroke5.png") no-repeat;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map/Stroke5_1.png")}
      }
      li:nth-child(6){top:262px;right:70px;width: 240px;height: 141px;background: url("~assets/image/dashboard/map/Stroke6.png") no-repeat;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map/Stroke6_1.png")}
      }
      &>li:nth-child(7){top:253px;right:306px;width: 105px;height: 147px;background: url("~assets/image/dashboard/map/Stroke7.png") no-repeat;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map/Stroke7_1.png")}
      }
      &>li:nth-child(8){top:208px;right:392px;width: 443px;height: 198px;background: url("~assets/image/dashboard/map/Stroke8.png") no-repeat;
        &:hover,&.active{background-image:url("~assets/image/dashboard/map/Stroke8_1.png")}
      }
    }
  }
</style>
